现有 api 和hooks 总结

React 稳定版常用 API & Hooks 总表（不含实验特性）

基础 Hooks

性能优化 Hooks

DOM / 生命周期 Hooks

React DOM API

Hooks 使用规则（面试必考）

高频对比（面试非常常见）

一句话记忆（适合面试口语）

• useState：管理会影响 UI 的状态
• useRef：存不影响 UI 的值或拿 DOM
• useEffect：处理副作用
• useMemo：缓存结果
• useCallback：缓存函数
• useReducer：复杂状态机
• useContext：跨层传值
• useLayoutEffect：操作 DOM 时机更早

面试官最爱问的坑点

1. 为什么 useEffect 会执行两次？

因为 React StrictMode 开发模式故意检查副作用。

2. 为什么 setState 不立即更新？

因为批处理 + 调度机制。

3. 为什么不要滥用 useMemo/useCallback？

因为本身也有性能成本。

4. ref 为什么不触发更新？

因为它不是响应式状态。

最推荐你的记忆顺序（前端面试）

先背： useState → useEffect → useRef → useMemo → useCallback → useContext → useReducer

再背： forwardRef → useImperativeHandle → useTransition → useSyncExternalStore

对于大部分前端面试，这套已经覆盖 90%+ React 问题。

Q1: useState 和普通变量（例如 let count = 0）的核心区别是什么？为什么 React 不直接用普通变量管理 UI？

useState 和普通变量最核心的区别有两个：

1. 普通变量不会触发组件重新渲染

1
let count = 0;
2
count++;

即使值变了，React 并不知道这个变化，所以 UI 不会自动更新。

2. useState 会被 React 保存，并在更新时触发 rerender

xxxxxxxxxx
2
1
const [count, setCount] = useState(0);
2
setCount(count + 1);

调用 setCount 后：

• React 会更新 Fiber 中保存的状态
• React 会重新执行组件函数
• UI 会根据新状态重新渲染

3. 普通变量在函数组件重新执行时会被重置

xxxxxxxxxx
3
1
function Counter() {
2
  let count = 0;
3
}

每次 render 都重新从 0 开始。

而 useState 的值不会因为函数重新执行而丢失，因为 React 是按 Hook 链表（或索引）保存状态。

一句话总结: 普通变量只能存值；useState 不仅存值，还能通知 React 更新界面。

Standard Answer (English)

The core difference between useState and normal variables is:

1. Normal variables do not trigger re-render

xxxxxxxxxx
2
1
let count = 0;
2
count++;

Even if the value changes, React does not track it, so the UI will not update.

2. useState is tracked by React

xxxxxxxxxx
2
1
const [count, setCount] = useState(0);
2
setCount(count + 1);

When setCount is called:

• React stores the new state in Fiber
• React schedules a re-render
• The UI updates automatically

3. Normal variables reset on every render

Function components re-run entirely, so local variables are recreated.

useState persists because React stores it outside the function body.

面试官为什么问这个？

因为这是在考你是否真正理解：

• React 为什么是响应式
• Fiber 如何管理状态
• 为什么函数组件不是“执行一次”

实战场景

错误写法：

xxxxxxxxxx
2
1
let loading = false;
2
loading = true;

页面不会更新。

正确写法：

xxxxxxxxxx
2
1
const [loading, setLoading] = useState(false);
2
setLoading(true);

常见误区

错误：“useState 就是一个普通变量升级版”

正确：“useState 本质是 React 的状态调度系统的一部分”

面试口语版（中文）

useState 和普通变量最大的区别是，普通变量变化不会让 React 重新渲染，而且组件重新执行时变量会重置。useState 的状态是 React 保存的，调用 setter 后 React 会触发更新，所以 UI 能同步变化。

Interview Spoken Answer (English)

The biggest difference is that normal variables are not reactive. Changing them will not trigger a re-render, and they reset every time the component function runs again. useState is managed by React internally, so when we call the setter, React updates the state and re-renders the component automatically.

Q2: useEffect 的作用是什么？它和直接把代码写在组件函数体里面有什么本质区别？

问题：

例如：为什么下面这种写法通常有问题？

xxxxxxxxxx
4
1
function User() {
2
  fetch('/api/user');
3
  return <div>User</div>;
4
}

1. useEffect 的核心作用是：在 React 渲染完成后执行副作用代码，用于同步组件和 React 外部系统。

外部系统包括：

• API 请求
• DOM 操作
• 事件监听
• 定时器
• WebSocket
• localStorage

2. 为什么不能直接写在组件函数体里？

因为组件函数体的本质是： Render 阶段（渲染阶段）

React 要求 render 必须：

• 纯函数
• 无副作用
• 相同输入得到相同输出

错误示例：

xxxxxxxxxx
4
1
function User() {
2
  fetch('/api/user');
3
  return <div>User</div>;
4
}

这段代码的问题在于：每次组件重新渲染都会重新请求。

• state 更新
• props 更新
• 父组件更新

都会导致重复请求，甚至死循环。

正确写法：

xxxxxxxxxx
3
1
useEffect(() => {
2
  fetch('/api/user');
3
}, []);

This ensures the effect runs after render and only once on mount.

[] 的含义：只在首次挂载后执行一次。

本质区别

组件函数体：“描述 UI 应该长什么样”

useEffect：“UI 渲染后，需要顺便做什么事”

一句话总结：Render 用来计算界面，Effect 用来处理副作用。

Standard Answer (English)

1. useEffect is used to run side effects after React finishes rendering.

Examples:

• Fetching data
• Event listeners
• Timers
• DOM subscriptions
• External APIs

2. Why not put side effects directly inside the component body?

Because the component body runs during the render phase, which should stay pure.

React may re-run the component many times, so this:

xxxxxxxxxx
1
1
fetch('/api/user');

could trigger repeated requests on every render.

面试官为什么问这个？

因为这题在考：

• 你是否理解 render 是纯函数
• 你是否知道副作用执行时机
• 你是否理解 React 生命周期思维

实战场景

常见错误：

xxxxxxxxxx
3
1
setInterval(...)
2
window.addEventListener(...)
3
fetch(...)

直接写组件里，可能造成：

• 重复绑定
• 内存泄漏
• 无限请求

常见误区

错误：“useEffect = componentDidMount”

正确：useEffect 更像 “render 后同步副作用”，不仅仅是 mount。

面试口语版（中文）

useEffect 主要用于处理副作用，比如请求接口、事件监听或者定时器。因为组件函数本身是 render 阶段，应该保持纯净，如果直接把 fetch 写在函数体里，每次重新渲染都会执行，容易造成重复请求。useEffect 可以让这些操作在渲染完成后按依赖控制执行。

Interview Spoken Answer (English)

useEffect is mainly used for side effects like API calls, event listeners, or timers. The component body itself is the render phase and should stay pure. If we put something like fetch directly inside it, it may run on every render and cause repeated requests. useEffect lets us run those side effects after rendering and control them with dependencies.

Q3: useEffect 的依赖数组（dependency array）到底是做什么的？

请你分别解释下面三种情况的区别，以及实际开发中各自适合什么场景：

xxxxxxxxxx
3
1
useEffect(() => {});
2
useEffect(() => {}, []);
3
useEffect(() => {}, [count]);

useEffect 的第二个参数（依赖数组）本质上是： 告诉 React，当哪些依赖变化时，需要重新执行这个副作用。

React 会用浅比较（Object.is）检查依赖是否变化。

第一种：

xxxxxxxxxx
1
1
useEffect(() => {});

含义：没有依赖数组 → 每次 render 后都执行

执行时机：

• 首次渲染后执行
• 每次 state / props 更新后都执行

场景：很少用，因为容易造成性能问题。

风险：如果里面 setState，容易无限循环。

第二种：

xxxxxxxxxx
1
1
useEffect(() => {}, []);

含义：空依赖 → 只在首次挂载后执行一次

场景：

• 初始化请求
• 注册事件监听
• 启动定时器

注意：

如果引用外部变量，但不加依赖，可能拿到旧值（stale closure）。

第三种：

xxxxxxxxxx
1
1
useEffect(() => {}, [count]);

含义：首次执行 + count 改变时重新执行

场景：

• 根据搜索词重新请求
• 根据 id 获取详情
• 状态变化同步外部系统

示例：

xxxxxxxxxx
3
1
useEffect(() => {
2
  fetchUser(count);
3
}, [count]);

一句话总结

• 不写依赖数组：每次 render 后都执行
• []：只执行一次
• [x]：首次 + x 改变时执行

更底层理解

不是“执行次数控制器”，而是：副作用和依赖之间的同步声明。

Standard Answer (English)

The dependency array tells React when the effect needs to re-run based on specific reactive values.

1.

xxxxxxxxxx
1
1
useEffect(() => {});

Runs after every render.

Use case:

Rarely useful, can cause performance issues.

2.

xxxxxxxxxx
1
1
useEffect(() => {}, []);

Runs only once after initial mount.

Use case:

• Initial fetch
• Event listeners
• Setup logic

3.

xxxxxxxxxx
1
1
useEffect(() => {}, [count]);

Runs on mount + whenever count changes.

Use case:

Syncing side effects with changing state.

面试官为什么问这个？

因为这题核心在考：

• 你是否理解 React dependency model
• 是否知道 stale closure
• 是否理解无限循环根源

实战场景

搜索：

xxxxxxxxxx
3
1
useEffect(() => {
2
  search(keyword);
3
}, [keyword]);

监听：

xxxxxxxxxx
4
1
useEffect(() => {
2
  window.addEventListener(...);
3
  return () => window.removeEventListener(...);
4
}, []);

常见误区

错误：“[] 就等于 componentDidMount”

正确：更像“首次同步”，不是类组件生命周期的简单复制。

错误：“依赖不写更省事”

正确：

如果不写依赖可能导致：

• 无限执行
• 数据不同步
• 闭包旧值

面试口语版（中文）

依赖数组本质上是告诉 React，这个 effect 依赖哪些值变化。不写依赖就是每次渲染后都执行；空数组表示只在首次挂载执行一次；而写 [count] 表示首次挂载时执行，并且 count 改变时重新执行。实际开发里最重要的是保证副作用和依赖同步，否则容易出现无限循环或者拿到旧数据。

Interview Spoken Answer (English)

The dependency array tells React which values this effect depends on. Without it, the effect runs after every render. With an empty array, it runs only once after mount. With [count], it runs on mount and whenever count changes. In real projects, it’s mainly about keeping side effects synchronized with state changes and avoiding stale data or infinite loops.

Q4: 为什么 useEffect 里有时候需要返回一个 cleanup function（清理函数）？

请你结合真实开发场景解释：如果不清理，可能会出现什么问题？

例如：

xxxxxxxxxx
3
1
useEffect(() => {
2
  window.addEventListener('resize', handleResize);
3
}, []);

useEffect 返回 cleanup function 的核心作用是： 在副作用失效前，撤销之前注册的外部资源，避免重复订阅、资源残留和状态错误。

常见需要清理的场景

1. 事件监听

xxxxxxxxxx
7
1
useEffect(() => {
2
  window.addEventListener('resize', handleResize);
3
​
4
  return () => {
5
    window.removeEventListener('resize', handleResize);
6
  };
7
}, []);

为什么必须清理？

如果组件卸载后不移除：

• 监听器仍然存在
• 回调继续执行
• 引用组件旧状态
• 可能重复绑定多个监听器

结果可能包括：

• 内存泄漏

  无用引用无法被 GC 回收

• 重复执行

  一个 resize 触发多次 callback

• 状态更新到已卸载组件

  可能出现：“Can't perform a React state update on an unmounted component”

2. 定时器

xxxxxxxxxx
5
1
useEffect(() => {
2
  const timer = setInterval(...);
3
​
4
  return () => clearInterval(timer);
5
}, []);

3. WebSocket / Subscription

xxxxxxxxxx
1
1
return () => socket.close();

4. Abort fetch

xxxxxxxxxx
1
1
return () => controller.abort();

执行时机

Cleanup 会在两种情况下执行：

• 组件卸载时

• 下一次 effect 执行前（依赖变化）

  示例：

  xxxxxxxxxx
  5
  1
  useEffect(() => {
  2
    subscribe(id);
  3
  ​
  4
    return () => unsubscribe(id);
  5
  }, [id]);
  

  当 id 改变时：先取消旧订阅，再创建新订阅。

一句话总结：cleanup 的本质不是“清理代码”，而是撤销上一次副作用。

Standard Answer (English)

The cleanup function is used to remove or cancel side effects before they become invalid.

Its purpose is to:

• Prevent memory leaks
• Avoid duplicate subscriptions
• Stop stale async logic
• Prevent updates after unmount

Example:

xxxxxxxxxx
7
1
useEffect(() => {
2
  window.addEventListener('resize', handleResize);
3
​
4
  return () => {
5
    window.removeEventListener('resize', handleResize);
6
  };
7
}, []);

Without cleanup:

• Event listeners stay active
• Multiple listeners may stack
• Old closures may persist
• Memory/resources are wasted

Cleanup runs when:

1. Component unmounts
2. Before effect re-runs

面试官为什么问这个？

因为这是在考：

• 你是否理解副作用生命周期
• 是否能避免 memory leak
• 是否真正做过真实项目

实战场景（非常常见）

错误：

xxxxxxxxxx
5
1
useEffect(() => {
2
  setInterval(() => {
3
    console.log('tick');
4
  }, 1000);
5
}, []);

组件卸载后 interval 还在跑。

正确的写法，需要加上清理函数：

xxxxxxxxxx
1
1
return () => clearInterval(timer);

常见误区

错误：“只有卸载时才 cleanup”

正确：依赖变化时也会 cleanup 上一次 effect。

错误：“fetch 不需要 cleanup”

正确：异步请求也可能需要 abort，避免竞态问题。

面试口语版（中文）

cleanup function 的作用是撤销上一次副作用，比如移除事件监听、清除定时器、关闭订阅。如果不清理，组件卸载后这些外部资源可能还继续运行，导致内存泄漏、重复执行，甚至更新已经卸载的组件。它本质上是保证副作用生命周期正确。

Interview Spoken Answer (English)

The cleanup function is used to undo previous side effects, such as removing event listeners, clearing timers, or unsubscribing from external resources. Without cleanup, those side effects may continue after the component unmounts, causing memory leaks, duplicate execution, or stale state updates. Its main purpose is to keep side effects properly synchronized with the component lifecycle.

Q5: useRef 和 useState 都可以“保存值”，那它们的本质区别是什么？

请你结合真实开发场景回答：

1. 什么情况下你会用 useRef 而不是 useState？
2. 为什么修改 ref.current 不会触发重新渲染？
3. useRef 除了操作 DOM，还有哪些常见用途？

useRef 和 useState 都能跨 render 保存值，但本质区别是：

1. 核心区别

useState用于影响 UI 的响应式状态

xxxxxxxxxx
1
1
const [count, setCount] = useState(0);

特点：

• 更新会触发 rerender
• React 会重新渲染组件
• 适合界面展示数据

useRef

用于保存不会影响 UI 的可变值

xxxxxxxxxx
2
1
const countRef = useRef(0);
2
countRef.current++;

特点：

• 修改 .current 不会 rerender
• 生命周期贯穿整个组件
• React 不追踪它的变化

为什么 ref.current 不触发更新？

因为 React 的更新机制只监听：

• state
• props
• context

ref 本质更像：一个持久化的普通对象容器

xxxxxxxxxx
1
1
{ current: value }

改它不会进入 React 调度流程。

useRef的实战场景

场景1：操作 DOM

xxxxxxxxxx
1
1
inputRef.current.focus();

场景2：保存定时器 ID

xxxxxxxxxx
1
1
const timerRef = useRef(null);

避免 rerender。

场景3：保存上一次值

xxxxxxxxxx
1
1
prevValueRef.current = value;

场景4：避免 stale closure

保存最新 callback。

什么时候选 useRef 而不是 useState？

用 useRef：

• DOM
• timer id
• websocket instance
• previous value
• mutable cache

用 useState：

• count
• loading
• modal open
• form data
• 任何需要更新 UI 的数据

一句话总结useState 管 UI，useRef 管引用。

Standard Answer (English)

Both useState and useRef persist values across renders, but:

useState

Used for reactive state that affects UI.

• Updating it triggers re-render
• React tracks changes

useRef

Used for mutable values that should persist but not trigger UI updates.

• Updating ref.current does not re-render
• React does not track it

Why?

Because useRef is just a persistent object:

xxxxxxxxxx
1
1
{ current: ... }

React doesn’t schedule updates for it.

useRef common real-world uses:

DOM access

Timer IDs

Previous values

External instances

Avoiding stale closures

面试官为什么问这个？

因为这题考你：

• 是否理解 React 响应式机制
• 是否会避免不必要 rerender
• 是否真正写过性能优化代码

常见误区

错误：“useRef 就是拿 DOM 的”

正确：DOM 只是其中一个用途，它更常用于持久化非 UI 数据。

错误：“useRef 不能改”

正确：可以改，但 React 不关心。

面试口语版（中文）

useState 和 useRef 都可以跨渲染保存值，但 useState 是响应式状态，更新后会触发组件重新渲染，适合管理 UI。useRef 更像一个持久化容器，修改 .current 不会触发渲染，所以更适合保存 DOM、定时器、上一次值或者其他不影响界面的数据。

Interview Spoken Answer (English)

Both useState and useRef can persist values across renders, but useState is reactive and triggers re-render when updated, so it’s used for UI state. useRef is more like a persistent container whose .current value can change without causing re-render, so it’s useful for DOM references, timers, previous values, or other mutable data that doesn’t directly affect the UI.

Q6: useMemo 和 useCallback 的区别是什么？它们分别解决什么问题？

请你结合实际开发说明：

1. 它们各自缓存的是什么？
2. 为什么 React 需要它们？
3. 什么时候“用了反而更慢”？

一、核心区别（一句话）

• useMemo：缓存计算结果（值）
• useCallback：缓存函数本身

1. 它们分别缓存什么？

useMemo：缓存“值”

xxxxxxxxxx
3
1
const result = useMemo(() => {
2
  return computeExpensiveValue(count);
3
}, [count]);

👉 返回的是“计算后的结果”

useCallback：缓存“函数”

xxxxxxxxxx
3
1
const handleClick = useCallback(() => {
2
  console.log(count);
3
}, [count]);

👉 返回的是“函数引用本身”

2. 本质关系（重点）

👉 useCallback 其实是 useMemo 的语法糖

xxxxxxxxxx
3
1
useCallback(fn, deps)
2
// 等价于
3
useMemo(() => fn, deps)

3. 为什么 React 需要它们？

React 默认行为：

每次 render：

• 函数都会重新创建
• 计算都会重新执行

问题1：昂贵计算重复执行

xxxxxxxxxx
1
1
const value = heavyCompute(data);

👉 每次 render 都算一次（浪费性能）

问题2：子组件不必要 rerender

xxxxxxxxxx
1
1
<Child onClick={() => doSomething()} />

👉 每次 render 都生成新函数 👉 子组件即使 memo 也会重新渲染

4. useMemo / useCallback 解决什么问题？

5. 什么时候“用了反而更慢”？

这是面试重点（很多人答不出来）

❌ 情况1：计算很简单

xxxxxxxxxx
1
1
const sum = useMemo(() => a + b, [a, b]);

👉 useMemo 本身有缓存开销 👉 比直接计算更慢

❌ 情况2：子组件没优化

xxxxxxxxxx
1
1
const handle = useCallback(() => {}, []);

但 Child 没有 memo：

👉 用不用 useCallback 都一样 rerender

❌ 情况3：依赖变化频繁

如果 deps 每次都变：等于“白缓存”

6. 正确使用场景

useMemo

• 大计算（filter / sort / transform）
• 避免重复计算
• 渲染列表优化

useCallback

• 传给 memo 子组件
• event handler
• 防止 props 引用变化

一句话总结

👉 useMemo 优化“计算” 👉 useCallback 优化“函数引用”

Standard Answer (English)

Core difference:

• useMemo caches a computed value
• useCallback caches a function

1. What they cache

useMemo:

xxxxxxxxxx
1
1
const value = useMemo(() => compute(), [deps]);

Returns a memoized value.

useCallback:

xxxxxxxxxx
1
1
const fn = useCallback(() => {}, [deps]);

Returns a memoized function reference.

2. Why React needs them

Because by default:

• Functions are recreated every render
• Expensive computations run again

3. When they can hurt performance

• Computation is cheap → overhead > benefit
• Child component is not memoized
• Dependencies change too often → no real caching benefit

面试口语版（中文）

useMemo 是用来缓存计算结果的，避免每次 render 都做重复计算，比如排序或者过滤列表。useCallback 是用来缓存函数本身，避免函数引用变化导致子组件不必要的重新渲染。两者本质区别是一个缓存值，一个缓存函数。但如果计算很简单或者子组件没有做 memo 优化，用它们反而可能增加性能开销。

Interview Spoken Answer (English)

useMemo is used to memoize computed values to avoid expensive recalculations on every render. useCallback is used to memoize function references so that child components don’t re-render unnecessarily due to changed props. However, if the computation is trivial(琐碎的，不重要的) or the child component is not optimized with memo, using them can actually hurt performance instead of improving it.

Q7: useEffect 依赖项里如果写错了，会出现什么问题？

请结合实际开发回答：

1. 依赖写少了会怎样？
2. 依赖写多了会怎样？
3. 为什么 React 不帮你自动处理依赖？

一、依赖写少了会怎样？

👉 会出现“数据过期 / 闭包旧值问题（stale closure）”

例子：

xxxxxxxxxx
3
1
useEffect(() => {
2
  console.log(count);
3
}, []);

问题：

• effect 只执行一次
• 里面的 count 永远是“初始值”
• 后续更新不会感知

结果：

👉 UI 和逻辑不同步 👉 使用旧数据

二、依赖写多了会怎样？

👉 effect 频繁执行，引发性能问题甚至死循环

例子：

xxxxxxxxxx
3
1
useEffect(() => {
2
  fetchData();
3
}, [data]);

问题：

• effect 依赖 data
• fetchData 又可能更新 data
• 触发重新执行 effect

结果：

👉 无限循环请求 / 多次重复执行

三、依赖写错的本质问题

👉 React 无法“自动猜测你依赖什么”

因为React 的设计原则是：

side effect must be explicit(清楚明白的，明确的)

四、为什么 React 不帮你自动处理依赖？

核心原因有三个：

1. JavaScript 是动态的

xxxxxxxxxx
1
1
const x = props[a ? b : c];

👉 React 无法静态分析真实依赖

2. 闭包问题

effect 捕获的是“某一轮 render 的变量”

3. 性能成本

如果 React 自动追踪： 👉 会变成“全量依赖追踪系统” 👉 性能不可接受

五、真实开发总结

❌ 依赖少会造成：

• stale data
• UI 不更新
• 逻辑错误

❌ 依赖多会造成：

• 重复请求
• 无限循环
• 性能下降

✅ 正确做法：

• 明确写依赖
• 用 ESLint react-hooks/exhaustive-deps
• 必要时用 useRef / useCallback 优化

一句话总结：dependency 写错 = React 逻辑同步失败

Standard Answer (English)

1. Missing dependencies

Leads to stale closure issues:

• Effect uses outdated values
• State inside effect is not updated

2. Extra dependencies

Leads to:

• unnecessary re-execution
• performance issues
• possible infinite loops

3. Why React doesn’t auto-handle deps?

Because:

1. JavaScript is dynamic and hard to statically analyze
2. Effects rely on closures
3. Automatic tracking would be too expensive performance-wise

面试口语版（中文）

如果 useEffect 依赖写少了，就会出现闭包拿到旧值的问题，导致数据不同步。如果写多了，会导致 effect 频繁执行，甚至可能引发无限循环。React 不帮我们自动管理依赖，是因为 JavaScript 是动态的，React 无法准确判断你真正依赖哪些变量，所以必须开发者自己显式声明。

Interview Spoken Answer (English)

If dependencies are missing, we may get stale closure issues where the effect uses outdated values. If we include too many dependencies, the effect may run too often and even cause infinite loops or performance issues. React doesn’t automatically manage dependencies because JavaScript is dynamic and closures make it hard to statically determine what values are truly used, so developers must explicitly declare them.

Q8: useEffect 和 useLayoutEffect 有什么区别？在真实项目中你会怎么选择？

请重点回答这几个点：

1. 执行时机有什么不同？
2. 会不会阻塞浏览器渲染？
3. 什么场景必须用 useLayoutEffect？

1. 执行时机区别

useEffect

• 在 浏览器完成绘制（paint）之后 执行
• 属于 异步执行

👉 不会阻塞页面显示

useLayoutEffect

在 DOM 更新完成（commit phase）后，浏览器绘制之前同步执行

👉 会阻塞浏览器绘制

2. 是否阻塞渲染？

3. 关键本质区别

useEffect：

👉 “先把页面画出来，再处理副作用”

useLayoutEffect：

👉 “先处理完 DOM，再让浏览器画”

4. 为什么 useLayoutEffect 会阻塞？

因为它是：

• 同步执行
• 在 paint 前运行

所以 React 必须等它执行完才能继续绘制

5. 真实项目怎么选？

默认用 useEffect（99%场景）

适合：

• 请求数据
• 订阅事件
• 打 log
• 非 UI 关键逻辑

必须用 useLayoutEffect 的场景

• 测量 DOM 尺寸

  xxxxxxxxxx
  3
  1
  useLayoutEffect(() => {
  2
    const width = ref.current.getBoundingClientRect().width;
  3
  }, []);
  

  👉 防止闪烁

• 避免 UI 抖动（layout shift）

  例如：

  • tooltip 位置计算
  • modal 定位
  • 滚动修正

• 同步 DOM 修改

  比如：

  • 强制 scroll position
  • 立即调整样式

6. 面试关键点总结

👉 useLayoutEffect = “防闪烁工具”

一句话总结

• useEffect：不影响画面，异步执行
• useLayoutEffect：阻塞绘制，同步执行 DOM 计算

Standard Answer (English)

1. Timing difference

useEffect

Runs after the browser paints the screen (async).

useLayoutEffect

Runs after DOM updates but before paint (sync).

2. Rendering impact

3. Core idea

• useEffect → “paint first, then run side effects”
• useLayoutEffect → “run effects before painting”

4. When to use useLayoutEffect

• measuring DOM size
• preventing flicker (layout shift)
• synchronizing layout changes before paint

面试口语版（中文）

useEffect 是在浏览器绘制完成之后执行的，不会阻塞页面渲染。而 useLayoutEffect 是在 DOM 更新完成后、浏览器绘制之前同步执行的，所以它会阻塞渲染。一般情况下用 useEffect，只有在需要读取 DOM 布局或者避免页面闪烁的时候才用 useLayoutEffect。

Interview Spoken Answer (English)

useEffect runs after the browser has painted the screen, so it doesn’t block rendering. useLayoutEffect runs synchronously after DOM updates but before painting, so it blocks the browser from rendering until it finishes. In most cases we use useEffect, and only use useLayoutEffect when we need to measure DOM or prevent visual flickering.

Q9: useContext 的作用是什么？它和“props 层层传递”有什么本质区别？

请结合真实项目回答：

1. 为什么 React 提供 Context？解决什么问题？
2. Context 更新会发生什么（性能角度）？
3. 什么情况下不适合用 Context？

1. useContext 的作用

useContext 用于：跨层级共享数据，避免 props 层层传递（props drilling）

例如：

• 用户信息（user）
• 主题（theme）
• 语言（i18n）
• 登录状态

传统 props 传递问题：

xxxxxxxxxx
1
1
App → Page → Layout → Header → Avatar

中间组件只是“转发数据”，但不使用。

Context 方案：

xxxxxxxxxx
2
1
const UserContext = createContext();
2
const user = useContext(UserContext);

👉 直接获取，不需要层层传递

2. Context 更新会发生什么？

所有消费该 Context 的组件都会重新渲染

这是面试重点 ⚠️

Context 本质是：“全局订阅源”。

一旦 value 变化：

• 所有 useContext 的组件都会 rerender

性能问题示例：

xxxxxxxxxx
1
1
<UserContext.Provider value={{ name }}>

每次 render 都创建新对象：所有子组件都会更新

3. 为什么 Context 不是状态管理工具？

因为它没有：

• 精细更新控制
• selector 机制
• 局部订阅优化

👉 所以它适合“低频变化数据”

4. 什么情况不适合用 Context？

❌ 高频更新数据

例如：

• input 输入值
• 鼠标位置
• 动画状态
• 实时列表数据

👉 会导致全局 rerender

❌ 大规模状态拆分

Context 会变成“全局 rerender 触发器”

5. 正确使用场景

✅ 适合：

• 登录用户信息
• theme
• language
• 权限信息

❌ 不适合：

• 表单状态
• 局部 UI 状态
• 高频变化数据

一句话总结： Context 用来“共享数据”，但不是“高性能状态管理工具”

Standard Answer (English)

1. Purpose of useContext

useContext is used to avoid prop drilling by sharing data across deeply nested components.

2. What happens when Context updates?

When the context value changes, all components consuming that context re-render.

This is because they subscribe to the context provider.

3. Why not always use Context?

Because it lacks fine-grained control:

• no selector-based updates
• no partial subscription optimization
• can cause unnecessary re-renders

4. When NOT to use it

• frequently changing state (input, animation, mouse tracking)
• large-scale dynamic updates

5. Good use cases

• user authentication
• theme
• language (i18n)
• global configuration

面试口语版（中文）

useContext 的作用是解决 props drilling 问题，可以让组件跨层级直接获取数据，而不需要一层层传递。但它的问题是，一旦 context 的 value 发生变化，所有消费它的组件都会重新渲染，所以它不适合放高频更新的数据，一般用于用户信息、主题这些变化不频繁的全局状态。

Interview Spoken Answer (English)

useContext is used to solve prop drilling by allowing deeply nested components to access shared data directly. However, when the context value changes, all consuming components will re-render. Because of this, it is not suitable for frequently changing state, and is better used for global but stable data like user info, theme, or language settings.

Q10: useReducer 和 useState 有什么区别？在什么情况下你会选择 useReducer 而不是 useState？

请重点回答：

1. 两者在状态管理模型上的区别
2. useReducer 解决了 useState 的什么问题
3. 真实项目中的典型使用场景

1. 核心区别（本质模型）

useState

👉 “状态 = 直接赋值更新”

xxxxxxxxxx
1
1
setCount(count + 1);

• 状态更新是“点对点”
• 每次修改是独立的

useReducer

👉 “状态 = action 驱动 + reducer 计算”

xxxxxxxxxx
3
1
const [state, dispatch] = useReducer(reducer, initialState);
2
​
3
dispatch({ type: 'increment' });

本质区别一句话

• useState：直接改值
• useReducer：通过“规则（reducer）”统一管理状态变化

2. useReducer 解决了 useState 的什么问题？

问题1：状态逻辑分散

xxxxxxxxxx
3
1
setA(...)
2
setB(...)
3
setC(...)

👉 逻辑散落在组件各处

useReducer 解决：

👉 所有状态变化集中在 reducer

xxxxxxxxxx
6
1
function reducer(state, action) {
2
  switch(action.type) {
3
    case 'updateA':
4
    case 'updateB':
5
  }
6
}

问题2：复杂状态更新难维护

例如：

• 表单
• 多字段联动
• 多 step 流程

问题3：难以追踪状态变化来源

useState： 👉 “哪里都可以改”

useReducer： 👉 “只能 dispatch”

3. 什么时候用 useReducer？

✅ 适合场景

• 复杂表单

xxxxxxxxxx
5
1
formState = {
2
  name,
3
  email,
4
  password
5
}

• 多状态联动

  • step form
  • wizard
  • 多条件状态

• 状态逻辑复杂

  比如：

  • 增删改查
  • 状态机（state machine）

• 状态变化需要可追踪

  👉 类似 Redux 思维

4. useState 适合什么？

• input value
• toggle
• loading
• modal open/close
• 简单计数器

5. 面试关键总结

👉 useState = “简单状态” 👉 useReducer = “状态逻辑管理”

一句话总结：当状态变化“有规则、有结构、有多个触发方式”，就用 useReducer

Standard Answer (English)

1. Core difference

useState

Direct state updates:

• simple value updates
• no centralized logic

useReducer

Action-driven state management:

• updates go through reducer function
• logic is centralized and structured

2. Problems useReducer solves

• scattered state logic
• hard-to-maintain complex updates
• unclear state transition flow

3. When to use useReducer

• complex forms
• multi-step workflows
• state machines
• multiple related state updates

4. When to use useState

• simple UI state
• independent values
• low complexity logic

面试口语版（中文）

useState 适合简单状态，比如 input 或 toggle，而 useReducer 更适合复杂状态管理，因为它把所有状态更新逻辑集中在 reducer 里，通过 dispatch 来触发变化，这样状态变化更可控、更清晰，也更容易维护，尤其是在表单或者多状态联动的场景下。

Interview Spoken Answer (English)

useState is suitable for simple state like toggles or input values. useReducer is better for complex state management because it centralizes all state update logic inside a reducer function and uses dispatch to trigger changes. This makes state transitions more predictable and easier to maintain, especially in complex forms or multi-step workflows.

Q11: useMemo、useCallback 和 React.memo 三者在性能优化中分别扮演什么角色？它们之间有什么关系？

请重点回答：

1. 三者分别优化的是什么（值 / 函数 / 组件）
2. 为什么只用其中一个通常“不够”
3. 在真实项目中它们如何配合使用

1. 三者分别优化什么？

useMemo

👉 优化 “计算结果（值）”

xxxxxxxxxx
3
1
const filteredList = useMemo(() => {
2
  return list.filter(item => item.active);
3
}, [list]);

• 避免重复计算

useCallback

👉 优化 “函数引用”

xxxxxxxxxx
3
1
const handleClick = useCallback(() => {
2
  console.log(count);
3
}, [count]);

• 避免函数重新创建

React.memo

👉 优化 “组件重渲染”

xxxxxxxxxx
3
1
const Child = React.memo(function Child(props) {
2
  return <div>{props.value}</div>;
3
});

• props 不变 → 不重新渲染组件

2. 它们的关系（重点）

👉 它们是层层配合的

场景：

xxxxxxxxxx
1
1
<Child onClick={() => doSomething()} value={data} />

问题：

• inline function → 每次 render 都变
• data 可能是新引用
• Child 会 rerender

正确优化组合：

​x
1
const handleClick = useCallback(() => {}, []);
2
​
3
const data = useMemo(() => compute(dataSource), []);
4
​
5
<Child onClick={handleClick} value={data} />
6
const Child = React.memo(...)

3. 为什么只用一个不够？

❌ 只用 React.memo

没用 useCallback → props 仍然变 → memo 失效

❌ 只用 useCallback

Child 没 memo → 还是 rerender

❌ 只用 useMemo

函数还是重新创建 → props 仍变化

👉 结论： 它们必须组合使用才有意义

4. 本质理解（面试加分点）

React rerender 来源有三个：

• state 变化
• props 变化
• context 变化

👉 这三者优化的就是：

5. 什么时候“优化反而变慢”？

• 组件很简单
• 计算成本很低
• memo 判断成本 > rerender 成本

结论：不是所有地方都需要优化

一句话总结：React.memo 控制“组件”，useMemo 控制“值”，useCallback 控制“函数”

Standard Answer (English)

1. What each one optimizes

useMemo: Optimizes computed values.

useCallback: Optimizes function references.

React.memo: Prevents unnecessary component re-renders.

2. Relationship

They work together:

• useMemo → stable values
• useCallback → stable functions
• React.memo → prevents child re-render if props don’t change

3. Why one is not enough

Because:

• memo depends on stable props
• callbacks affect props identity
• values affect prop references

All three are interconnected.

面试口语版（中文）

useMemo 用来缓存计算结果，useCallback 用来缓存函数引用，React.memo 用来防止组件在 props 没变化时重复渲染。它们是配合使用的，如果只用其中一个，往往优化是无效的，比如函数没用 useCallback，React.memo 也会失效。

Interview Spoken Answer (English)

useMemo is used to memoize computed values, useCallback is used to memoize function references, and React.memo prevents unnecessary re-renders of components when props do not change. They are meant to work together; using only one of them often does not provide real performance benefits because the others can still cause re-renders.

Q12: useRef 在解决“闭包陷阱（stale closure）”问题时是怎么用的？

请你结合真实场景说明：

1. 什么是 stale closure（不用太学术）
2. 为什么 useEffect + setInterval 容易出现这个问题
3. useRef 是如何解决它的（核心机制）

1. 什么是 stale closure（闭包旧值问题）

简单理解： 一个函数“记住”了它被定义时的变量值，即使这些变量在后续的组件渲染中已经发生了变化，该函数内部依然在使用那个旧的值。

示例：

xxxxxxxxxx
22
1
import React, { useState, useEffect } from 'react';
2
​
3
function Counter() {
4
  const [count, setCount] = useState(0);
5
​
6
  useEffect(() => {
7
    const timer = setInterval(() => {
8
      // 这里的 count 形成了闭包，它“锁死”在了这个 Effect 第一次执行时的值（即 0）
9
      console.log(`Current count: ${count}`); 
10
    }, 1000);
11
​
12
    return () => clearInterval(timer);
13
  }, []); // ⚠️ 注意：依赖数组为空，Effect 只有在挂载时运行一次
14
​
15
  return (
16
    <div>
17
      <p>Count: {count}</p>
18
      <button onClick={() => setCount(count + 1)}>增加 Count</button>
19
    </div>
20
  );
21
}
22
​

为什么会出现 Stale Closure？

①首次渲染：count 为 0。useEffect 运行，创建了一个 setInterval 回调函数。

②闭包形成：这个回调函数捕获了当前渲染周期的 count 变量（其值为 0）。

③点击按钮：你点击了多次按钮，count 在 React 内部已经变成了 1, 2, 3...，组件也重新渲染了。

④陷阱发生：但由于 useEffect 的依赖数组是 []，它不会重新运行，因此 setInterval 里持有的依然是第一次渲染时的函数引用。那个函数闭包里的 count 永远是 0。

2. 为什么 setInterval 很容易出问题？

5
1
useEffect(() => {
2
  const id = setInterval(() => {
3
    console.log(count);
4
  }, 1000);
5
}, []);

问题原因：

• useEffect([]) 只执行一次
• 里面的 count 是“初始 render 的值”
• setInterval 一直用这个旧值

👉 结果：count 永远不更新（或者永远是 0）

3. useRef 是如何解决的？

核心思路：

👉 ref 不会因为 re-render 重新创建 👉 .current 始终是最新值

正确写法：

13
1
const countRef = useRef(0);
2
​
3
useEffect(() => {
4
  const id = setInterval(() => {
5
    console.log(countRef.current);
6
  }, 1000);
7
​
8
  return () => clearInterval(id);
9
}, []);
10
​
11
useEffect(() => {
12
  countRef.current = count;
13
}, [count]);

4. 为什么它能解决问题？

useRef 特点：

• 不触发 rerender
• 是一个“可变容器”
• 永远指向同一个对象

👉 所以： setInterval 读取的是：

xxxxxxxxxx
1
1
countRef.current // 永远最新

而不是闭包里的旧 count

5. 本质理解（面试加分）

stale closure 本质：

👉 “闭包 + React render 生命周期不一致”

useRef 的解决方案：

👉 “绕过闭包，改成引用读取最新值”

6. 实战场景

常见 bug：

• 定时器
• websocket callback
• event listener
• async 回调

一句话总结

👉 stale closure = “函数记住了旧 state” 👉 useRef = “用引用跳过闭包问题”

Standard Answer (English)

1. What is stale closure?

A stale closure happens when a function “captures” an old state value from a previous render and keeps using it even after the state has changed.

2. Why setInterval causes it

Because:

• useEffect(() => {}, []) runs only once
• the callback captures initial state
• interval keeps using that old closure forever

3. How useRef fixes it

useRef provides a persistent object whose .current always holds the latest value without triggering re-renders.

So instead of relying on closure values, we read:

xxxxxxxxxx
1
1
ref.current

which is always up to date.

面试口语版（中文）

stale closure 的问题是函数会记住某一轮 render 的 state，所以在 setInterval 或异步回调里容易拿到旧值。useRef 可以解决这个问题，因为 ref 是一个一直存在的对象，它的 current 会保存最新值，不会受闭包影响，所以可以在定时器里直接读取最新状态。

Interview Spoken Answer (English)

A stale closure happens when a function captures state from an earlier render and keeps using that outdated value. This often occurs with setInterval or async callbacks inside useEffect. useRef solves this because it holds a persistent object whose .current always reflects the latest value, allowing us to access up-to-date state without relying on closures.

Q13: React 18 引入的 useTransition 是用来解决什么问题的？它和普通的 setState 有什么区别？

请你尽量从真实交互体验角度来解释，比如：

1. 为什么需要“过渡更新”
2. 什么是“卡顿 UI”问题
3. useTransition 是如何改善体验的

1. useTransition 解决的是什么问题？

👉 解决“非紧急更新导致 UI 卡顿”的问题

在 React 18 之前，所有 state 更新：

• 都是同等优先级
• 大量数据更新会阻塞 UI 响应

2. 什么是卡顿 UI 问题？

例如：

2
1
setInput(value);
2
setList(hugeFilteredList);

问题：

• 输入框更新（很重要，必须立即响应）
• 大列表计算（很重）

👉 React 会一起执行 👉 UI 会卡顿（输入延迟）

3. useTransition 解决思路

👉 把更新分成两类：

4. 使用方式

5
1
const [isPending, startTransition] = useTransition();
2
​
3
startTransition(() => {
4
  setList(filteredData);
5
});

5. 它和 setState 的区别

setState：立即执行，高优先级

useTransition：标记为“可中断的低优先级更新”

React 可以：

• 先处理用户输入
• 再慢慢更新 UI

6. 核心效果

👉 提升“交互优先级”

用户感觉：

• 输入不卡
• 页面更流畅

7. isPending 的作用

1
1
isPending === true

👉 表示“后台更新还没完成”

常用于：

• loading UI
• skeleton

8. 本质理解（面试加分点）

👉 React 18 引入的是：“并发渲染（Concurrent Rendering）思想”

useTransition 是：👉 “让 React 有选择地延迟非关键更新”

一句话总结：useTransition = “让重要更新先执行，让不重要更新慢慢来”

Standard Answer (English)

1. What problem does useTransition solve?

It solves UI blocking caused by expensive or non-urgent state updates.

2. What is the issue?

In traditional React:

• all updates have the same priority
• heavy rendering can block input responsiveness

3. How useTransition helps

It splits updates into:

• urgent updates (input, clicks)
• non-urgent updates (large list rendering)

Non-urgent updates are marked as transitions and can be interrupted.

4. Difference from setState

• setState → high priority, immediate update
• useTransition → low priority, interruptible update

5. Result

Improves perceived performance and keeps UI responsive.

面试口语版（中文）

useTransition 主要解决的是 UI 卡顿问题，比如输入框更新很快，但后面还有一个很重的列表过滤，如果用普通 setState 会一起卡住 UI。而 useTransition 可以把这个更新标记为低优先级，让 React 先处理用户输入，再慢慢更新列表，从而提升交互流畅度。

Interview Spoken Answer (English)

useTransition is used to solve UI blocking issues caused by heavy state updates. In traditional React, all updates have the same priority, so expensive rendering can block user input. useTransition allows us to mark some updates as low priority, so React can prioritize urgent interactions like typing or clicking, and handle heavy updates in the background, improving overall responsiveness.

Q14: useSyncExternalStore 是干什么用的？它解决了什么问题？在什么场景下你会用到它？

请重点从这几个角度回答：

1. “external store” 指的是什么
2. 它解决了 React 18 的什么并发问题
3. 为什么普通 useState / useEffect 不够
4. 实际开发中的典型例子（比如 Redux / Zustand / 浏览器 API）

1. 什么是 external store？

👉 React 之外的状态源

也就是：不由 React 管理，但 UI 需要读取的数据。

例如：

• Redux store
• Zustand store
• 浏览器 API（localStorage / window size）
• WebSocket 状态
• 外部事件系统

2. 它解决了什么问题？

👉 React 18 并发模式下的“数据不一致问题（tearing）”

什么是 tearing？

简单理解：👉 UI 在不同时间读取到了“不一致的状态版本”

例如：

• 一个组件用旧 state
• 另一个组件用新 state

👉 页面显示不一致

3. 为什么 useState / useEffect 不够？

useState 问题：

• 只能管理 React 内部状态
• 无法同步外部 store

useEffect 问题：

• 是“被动同步”
• 有延迟
• 可能造成闪烁 / 不一致

👉 在 concurrent rendering 下： useEffect 太晚了

4. useSyncExternalStore 的作用

👉 让 React 安全订阅外部 store

它保证：

• 读取一致性
• 避免 tearing
• 兼容 concurrent rendering

5. 基本结构

4
1
const state = useSyncExternalStore(
2
  subscribe,
3
  getSnapshot
4
);

参数解释：

subscribe：监听外部变化

getSnapshot：获取当前状态

6. 实际例子

Redux（经典）

Redux 已经内部用它了：

1
1
useSyncExternalStore(store.subscribe, store.getState);

浏览器 API

window size

7
1
useSyncExternalStore(
2
  (cb) => {
3
    window.addEventListener("resize", cb);
4
    return () => window.removeEventListener("resize", cb);
5
  },
6
  () => window.innerWidth
7
);

Zustand（底层）

也是基于它实现订阅模型

7. 核心本质理解

👉 它不是“状态 hook”

👉 它是：“React 和外部系统的同步桥梁”

8. 为什么 React 18 必须有它？

因为 concurrent rendering：

• render 可以被打断
• state 可能不一致

👉 需要一个“强一致性订阅机制”

一句话总结：useSyncExternalStore = “安全连接 React 和外部状态系统的标准接口”

Standard Answer (English)

1. What is an external store?

Any state source outside React, such as:

• Redux store
• Zustand store
• browser APIs (window size, localStorage)
• WebSocket or event systems

2. What problem does it solve?

It solves state tearing issues in React 18 concurrent rendering, where different renders may see inconsistent snapshots of external state.

3. Why not use useState/useEffect?

• useState → only manages internal React state
• useEffect → asynchronous and can cause lag or inconsistent UI

4. What does useSyncExternalStore do?

It provides a safe way to subscribe to external stores while ensuring consistent snapshots during rendering.

5. Example use cases

• Redux integration
• Zustand internal implementation
• window resize listener
• external event systems

面试口语版（中文）

useSyncExternalStore 是 React 用来连接外部状态系统的 hook，比如 Redux、Zustand 或浏览器 API。它解决的问题是在 React 18 并发渲染下，外部状态可能在不同组件中读取不一致的问题。它通过订阅机制保证每次渲染拿到的是一致的状态快照，避免数据不一致。

Interview Spoken Answer (English)

useSyncExternalStore is a hook used to safely connect React with external state sources like Redux, Zustand, or browser APIs. It solves the problem of state tearing in React 18 concurrent rendering, where different components might read inconsistent snapshots of external state. It ensures that React always reads a consistent snapshot during rendering through a subscription-based mechanism.

Q15: useId 是做什么用的？它和自己手写 Math.random() 或递增 id 有什么区别？在 SSR（服务端渲染）场景下它解决了什么问题？

1. useId 是做什么的？

useId 用来生成稳定、唯一的 ID

常见用途：

• 表单 label/input 绑定
• 无障碍（accessibility）
• SSR + CSR 一致性

示例：

4
1
const id = useId();
2
​
3
<label htmlFor={id}>Name</label>
4
<input id={id} />

2. 和 Math.random / 自增 id 的区别

❌ Math.random()

xxxxxxxxxx
1
1
const id = Math.random();

问题：

• 每次 render 都可能变化
• SSR 和 CSR 不一致
• hydration mismatch

❌ 自增 id

xxxxxxxxxx
1
1
let id = 0;

问题：

• SSR 和客户端计数不同
• 多用户情况下冲突
• 并发渲染不安全

✅ useId

特点：

• SSR + CSR 一致
• 同一个组件实例稳定
• React 内部生成（基于树结构）

3. SSR 下解决什么问题？

解决 Hydration mismatch（服务端与客户端 DOM 不一致）

什么是 hydration mismatch？

SSR：

1
1
<input id="a1" />

CSR：

1
1
<input id="b2" />

👉 React 发现 DOM 不一致 → 报错或重新渲染

4. useId 为什么不会错？

因为：

👉 React 在 服务端 + 客户端使用同一套 ID 生成规则

• 基于组件树路径
• 而不是运行时随机值

5. 核心理解（面试加分）

useId 的本质不是“随机数生成器”，而是：“跨 SSR/CSR 的稳定标识系统”。

6. 典型使用场景

• 表单绑定

  xxxxxxxxxx
  2
  1
  <label htmlFor={id}>
  2
  <input id={id} />
  

• ARIA accessibility

  xxxxxxxxxx
  1
  1
  aria-describedby={id}
  

• SSR 项目（Next.js）

  避免 hydration warning

一句话总结

👉 useId = “保证 SSR + CSR 一致的稳定唯一 ID”

Standard Answer (English)

1. What is useId?

useId generates a stable and unique ID that remains consistent across renders and between server and client.

2. Why not use Math.random or counters?

• Math.random → different on every render, causes hydration mismatch
• counters → inconsistent between server and client

3. What problem does it solve in SSR?

It solves hydration mismatch, where server-rendered HTML and client-rendered HTML have different IDs.

4. Why useId works?

Because React generates IDs based on the component tree structure, ensuring consistency between server and client.

面试口语版（中文）

useId 用来生成稳定唯一的 ID，主要用于表单和无障碍场景。和 Math.random 或自增 ID 不同，它不会在每次 render 改变，而且在 SSR 场景下服务端和客户端生成的 ID 是一致的，可以避免 hydration mismatch 问题。

Interview Spoken Answer (English)

useId is used to generate stable and unique IDs, mainly for form associations and accessibility. Unlike Math.random or manual counters, it produces consistent IDs across renders and also ensures server and client output match in SSR, preventing hydration mismatches.

Q16: useImperativeHandle 是做什么用的？它和 forwardRef 是什么关系？在真实项目中你会在什么场景用它？

请重点回答：

1. 它解决了什么问题（为什么不能直接用 ref）
2. 和 forwardRef 的配合关系
3. 一个真实业务场景（比如表单 / 弹窗 / 组件控制）

1. useImperativeHandle 是做什么的？

👉 用来自定义子组件通过 ref 暴露给父组件的方法或属性

正常情况下：

xxxxxxxxxx
1
1
ref.current

👉 直接拿到的是 DOM 或组件实例（有限）

但有时候你不想暴露整个 DOM 或组件内部结构。

2. 它解决了什么问题？

👉 控制“子组件对外暴露的 API”

也就是：

不让父组件随便操作内部，只暴露必要方法

3. 和 forwardRef 的关系

forwardRef：👉 让函数组件“能接收 ref”

useImperativeHandle：👉 定义“ref 到底暴露什么”

例子：父组件需要控制子组件里的 Input 焦点或弹窗（Modal）的开关，其余的方法不需要暴露给父组件。

x
1
import React, { useState, useImperativeHandle, forwardRef, useRef } from 'react';
2
​
3
// 1. 使用 forwardRef 包裹组件，获取父组件传入的 ref
4
const SearchInput = forwardRef((props, ref) => {
5
  const inputRef = useRef();
6
​
7
  // 2. 使用 useImperativeHandle 定义暴露给父组件的对象
8
  useImperativeHandle(ref, () => {
9
    return {
10
      // 暴露一个聚焦方法
11
      focus: () => {
12
        inputRef.current.focus();
13
      },
14
      // 暴露一个清空内容的方法
15
      clear: () => {
16
        inputRef.current.value = '';
17
      }
18
    };
19
  }, []); // 依赖项通常为空，除非暴露的方法依赖某些 props 或 state
20
​
21
  return <input type="text" ref={inputRef} placeholder="搜索点什么..." />;
22
});
23
​
24
// 父组件
25
export default function Parent() {
26
  const searchRef = useRef(null);
27
​
28
  return (
29
    <div style={{ padding: '20px' }}>
30
      <SearchInput ref={searchRef} />
31
      
32
      <div style={{ marginTop: '10px' }}>
33
        {/* 3. 父组件通过 ref 调用子组件暴露的方法 */}
34
        <button onClick={() => searchRef.current.focus()}>聚焦输入框</button>
35
        <button onClick={() => searchRef.current.clear()}>清空输入框</button>
36
      </div>
37
    </div>
38
  );
39
}
40
​

为什么要这么做？（对比直接使用 forwardRef）

• 如果不使用 useImperativeHandle： 父组件通过 ref 拿到的是整个 <input /> DOM 节点。这意味着父组件可以修改子组件的样式、删除它、或者做任何破坏性的操作，这破坏了子组件的封装性。
• 使用后： 子组件像提供 API 一样，明确告诉父组件：“你只能调用我的 focus() 和 clear()”。父组件拿不到底层的 DOM，只能按规矩办事。

4. 为什么不能直接用 ref？

如果不用它：

xxxxxxxxxx
1
1
ref.current = <整个组件实例/DOM>

问题：

• 暴露太多内部实现
• 父组件可以乱操作
• 破坏封装性

👉 React 推荐： “只暴露必要 API，而不是整个内部结构”

5. 真实项目场景

场景1：表单组件（非常常见）

3
1
childRef.current.submit();
2
childRef.current.reset();
3
childRef.current.validate();

场景2：弹窗控制

2
1
modalRef.current.open();
2
modalRef.current.close();

场景3：输入框聚焦

1
1
inputRef.current.focus();

但可以只暴露 focus，而不暴露 DOM 全部能力

6. 本质理解（面试加分）

👉 它不是“操作 ref 的 hook”

👉 而是：“组件对外 API 封装机制”

注意事项

• 尽量少用： 在 React 中，应该优先考虑“数据驱动（Props）”。只有当通过状态管理很难实现某种指令式行为（如聚焦、滚动、动画播放）时，才考虑这种方案。

• 与 Stale Closure 的关联： 如果在 useImperativeHandle 暴露的方法中使用了某些 State，记得在依赖数组（第三个参数）中添加对应的 State，否则父组件调用的方法可能会遇到陈旧闭包问题，拿到的是旧的状态。

一句话总结：useImperativeHandle = “控制 ref 暴露范围，让组件像 API 一样被调用”

Standard Answer (English)

1. What is useImperativeHandle?

It allows you to customize what a parent component can access through a ref.

2. Problem it solves

Without it, a ref exposes the entire DOM or component instance, which breaks encapsulation.

3. Relationship with forwardRef

• forwardRef → enables ref access to functional components
• useImperativeHandle → defines what the ref exposes

4. Real-world use cases

• form components (submit, reset, validate)
• modal dialogs (open, close)
• controlled input components (focus, clear)

面试口语版（中文）

useImperativeHandle 是用来控制父组件通过 ref 能访问子组件哪些方法的。它通常和 forwardRef 一起使用，forwardRef 是让函数组件能接收 ref，而 useImperativeHandle 是用来定制 ref 暴露的内容，比如只暴露 open、close 或 focus 方法，而不是整个 DOM 或组件实例，这样可以更好地封装组件。

Interview Spoken Answer (English)

useImperativeHandle is used to control what a parent component can access through a ref. It works together with forwardRef, where forwardRef allows a functional component to receive a ref, and useImperativeHandle defines what methods or properties are exposed. This is useful for encapsulation, for example exposing only methods like open, close, or focus in modal or form components instead of exposing the entire internal instance.

Q17: React 中“受控组件（controlled component）”和“非受控组件（uncontrolled component）”有什么区别？

请重点回答：

1. 什么是受控 / 非受控
2. 它们和 useState / useRef 的关系
3. 各自适合什么场景（真实项目）
4. 为什么 React 推荐受控组件更多一些

1. 什么是受控组件（Controlled Component）

👉 表单数据由 React state 完全控制

3
1
const [value, setValue] = useState("");
2
​
3
<input value={value} onChange={(e) => setValue(e.target.value)} />

特点：

• 数据源在 React state
• UI 和数据完全同步
• 每次输入都会触发 state 更新

2. 什么是非受控组件（Uncontrolled Component）

👉 表单数据由 DOM 自己管理

3
1
const inputRef = useRef();
2
​
3
<input ref={inputRef} />

获取值：

1
1
inputRef.current.value;

特点：

• 数据不在 React state
• 由 DOM 保存状态
• 需要时才读取

3. 和 useState / useRef 的关系

4. 核心区别（面试重点）